import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"
import { getSongDetail, getSongLyric } from "@/service/modules/player"
import { parseLyric } from "@/utils/parse-lyric"
import type { RootState } from "@/store"
import type { ILyric } from "@/utils/parse-lyric"

export const fetchCurrentSongAction = createAsyncThunk<
  void,
  number,
  { state: RootState }
>("currentSong", (id, { dispatch, getState }) => {
  // 准备播放某一首歌曲时，分成两种情况
  // 从列表中尝试获取到这首歌曲
  const playSongList = getState().player.playSongList
  const findIndex = playSongList.findIndex((item) => item.id === id)

  if (findIndex === -1) {
    // 列表中没有这首歌曲，则获取歌曲数据
    getSongDetail(id).then((res) => {
      if (!res.songs.length) return
      const song = res.songs[0]

      const newPlaySongList = [...playSongList]
      newPlaySongList.push(song)
      dispatch(changeCurrentSongAction(song))
      dispatch(changePlaySongListAction(newPlaySongList))
      dispatch(changePlaySongIndexAction(newPlaySongList.length - 1))
    })
  } else {
    // 列表中存在这首歌曲
    const song = playSongList[findIndex]
    dispatch(changeCurrentSongAction(song))
    dispatch(changePlaySongIndexAction(findIndex))
  }

  // 获取歌词
  getSongLyric(id).then((res) => {
    const lyricString = res.lrc.lyric

    // 对歌词进行解析
    const lyrics = parseLyric(lyricString)
    dispatch(changeLyricsAction(lyrics))
  })
})

export const changeMusicAction = createAsyncThunk<
  void,
  boolean,
  { state: RootState }
>("changeMusic", (isNext, { dispatch, getState }) => {
  const playMode = getState().player.playMode
  const playSongList = getState().player.playSongList
  const playSongIndex = getState().player.playSongIndex

  // 根据不同的播放模式，计算出新的播放索引
  let newIndex = playSongIndex
  if (playMode === 1) {
    // 随机播放
    newIndex = Math.floor(Math.random() * playSongList.length)
  } else {
    // 单曲循环和顺序播放
    newIndex = isNext ? playSongIndex + 1 : playSongIndex - 1
    if (newIndex > playSongList.length - 1) newIndex = 0
    if (newIndex < 0) newIndex = playSongList.length - 1
  }

  // 获取当前的歌曲
  const song = playSongList[newIndex]
  dispatch(changeCurrentSongAction(song))
  dispatch(changePlaySongIndexAction(newIndex))

  // 获取歌词
  getSongLyric(song.id).then((res) => {
    const lyricString = res.lrc.lyric

    // 对歌词进行解析
    const lyrics = parseLyric(lyricString)
    dispatch(changeLyricsAction(lyrics))
  })
})

export interface IPlayerState {
  currentSong: any
  lyrics: ILyric[]
  lyricIndex: number
  playSongList: any[]
  playSongIndex: number
  playMode: number
}

const initialState: IPlayerState = {
  currentSong: {},
  lyrics: [],
  lyricIndex: -1,
  playSongList: [],
  playSongIndex: -1,
  playMode: 0 // 0: 顺序播放 1: 随机播放 2: 单曲循环
}

const playerSlice = createSlice({
  name: "player",
  initialState,
  reducers: {
    changeCurrentSongAction(state, { payload }) {
      state.currentSong = payload
    },
    changeLyricsAction(state, { payload }) {
      state.lyrics = payload
    },
    changeLyricIndexAction(state, { payload }) {
      state.lyricIndex = payload
    },
    changePlaySongIndexAction(state, { payload }) {
      state.playSongIndex = payload
    },
    changePlaySongListAction(state, { payload }) {
      state.playSongList = payload
    },
    changePlayModeAction(state, { payload }) {
      state.playMode = payload
    }
  }
})

export const {
  changeCurrentSongAction,
  changeLyricsAction,
  changeLyricIndexAction,
  changePlaySongIndexAction,
  changePlaySongListAction,
  changePlayModeAction
} = playerSlice.actions
export default playerSlice.reducer
